<template>
  <div :class="[$store.state.appPrefix + '-c-header']">
    <div class="headr-logo" @click="$router.push({name: 'home.index'})">
      <img v-if="userInfo.companyLogo" :src="`${resourceUrl}/${userInfo.companyLogo}`"/>
      <img v-else src="assets/images/LOGO.svg"/>
      <span class="headr-logo-name">{{userInfo.companySysName || WEB_TITLE_PREFIX}}</span>
    </div>
    <div class="head-menus">
      <menus />
    </div>
    <div class="header-right">
      <el-dropdown
        v-if="userInfo.nickName || userInfo.userName"
        class="header-personal"
        trigger="click"
        :class="{'is-expand': isExpand}"
        @command="handleCommand"
        @visible-change="handleVisibleChange">
        <span class="el-dropdown-link">
          <img v-if="userInfo.portraitUrl" class="header-portrait" :src="userInfo.portraitUrl" />

          <img v-else class="header-portrait" src="assets/images/default_avatar.png" />
          {{ userInfo.nickName || userInfo.userName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/change-password"><el-dropdown-item>密码修改</el-dropdown-item></router-link>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div v-else class="header-personal">游客，您好！请<a @click.prevent="$showLoginBox" class="header-login">登录</a></div>
    </div>
  </div>
</template>
<script>
import apiUrls from 'common/api-urls'
import { WEB_TITLE_PREFIX } from 'common/consts'
import { getTokenFromCookie } from 'common/auth'
import { userLogout, clearCacheForLogout } from './models'
import menus from '../menus'

export default {
  name: 'PageHeader',
  components: {
    menus
  },
  data() {
    return {
      resourceUrl: apiUrls.resourceUrl, // 静态资源地址
      isExpand: false,
      WEB_TITLE_PREFIX,
    }
  },
  computed: {
    userInfo() {
      const info = this.$store.state.user.userInfo
      console.log('userInfo:', info)
      return info
    }
  },
  methods: {
    handleVisibleChange(val) {
      this.isExpand = val
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$showLogOutDialog();
      } else if (command === 'person') {
        this.$router.push('/person')
      }
    },

    $showLogOutDialog() {
      this.$confirm('确定退出登录？', '提示', {
        confirmButtonText: '退出登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$logout();
      }).catch((err) => {
        console.log('$showLogOutDialog err:', err)
      })
    },

    $logout() {
      const token = getTokenFromCookie()
      userLogout({ token: token }).then(() => {
        clearCacheForLogout()
        window.location.href = 'login.html'
      }).catch(err => {
        console.log('$logout err:', err)
      })
    },

    $showLoginBox() {
      clearCacheForLogout()
      window.location.href = 'login.html'
      // this.$store.commit('NEED_SHOW_LOGIN_POP', true)
    },
  },
  created() {
  },
  mounted() {
  }
};
</script>
